<!--
 * @Description:
 * @version: 服务包底部弹窗
 * @Author: 潘骏杰
 * @Date: 2022-03-30 09:03:57
 * @LastEditors: 周子尧
 * @LastEditTime: 2022-04-11 10:28:40
-->
<template>
  <van-action-sheet v-model="showBol">
    <div class="content">
      <div v-if="sonobj.from === 'zero'">
        <!-- 基础套餐 -->
        <van-row>
          <van-col span="18">
            <div class="title black">{{ sonobj.name }}</div>
            <div class="title-detail van-ellipsis">{{ sonobj.detail }}</div>
          </van-col>
          <van-col span="6">
            <div class="price">¥{{ sonobj.price }}</div></van-col>
        </van-row>
        <van-divider />
        <div class="chose-title gray-9">签约时间</div>
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="active === index ? 'current row-time' : 'row-time'"
            @click="choseTime(item, index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div v-if="sonobj.from === 'one'">
        <!-- 个性化套餐 -->
        <van-row>
          <van-col span="18">
            <div class="title black">个性化服务包</div>
            <div class="title-detail van-ellipsis">已选：自由订购（2次）</div>
          </van-col>
          <van-col span="6">
            <div class="price">¥{{ sonobj.price }}</div></van-col>
        </van-row>
        <van-divider />
        <van-tabs v-model="activetab" color="#4A90E2" class="dialogTap">
          <van-tab title="自由订购">
            <div class="div-cont">
              <ul>
                <!-- .stop是click自带的冒泡   -->
                <li v-for="item in freeList" :key="item.id" class="row re">
                  <van-row>
                    <van-col span="18">
                      <div class="title black">{{ item.name }}</div>
                      <div class="detail van-ellipsis">{{ item.detail }}</div>
                    </van-col>
                    <van-col span="6">
                      <div class="text-right">
                        <div v-if="item.badge > 0" class="right">
                          <van-stepper
                            v-model="item.badge"
                            min="0"
                            theme="round"
                            button-size="22"
                            disable-input
                            @change="change(item)"
                          />
                        </div>
                        <van-icon
                          v-else
                          name="add"
                          class="blue"
                          @click.stop="change(item, 1)"
                        />
                      </div>
                    </van-col>
                  </van-row>
                </li>
              </ul>
            </div>
          </van-tab>
          <van-tab title="固定数量">
            <div class="div-cont">
              <van-row gutter="20">
                <van-col
                  v-for="(item, index) in times"
                  :key="index"
                  span="8"
                  :class="index === choseIndex ? 'current' : ''"
                ><div class="choseDiv" @click="ChoseNum(item, index)">
                  {{ item }}
                </div></van-col>
              </van-row>
            </div>
          </van-tab>
        </van-tabs>
      </div>

      <!-- submit -->
      <van-button
        type="primary"
        block
        round
        :disabled="submiting"
        :loading="submiting"
        loading-text="提交中..."
        @click="submit"
      >确定</van-button>
    </div>
  </van-action-sheet>
</template>
<script>
export default {
  name: 'BottomDialog',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    titleList: {
      type: Array,
      default() {
        return []
      }
    },
    sonobj: {
      type: Object,
      default() {
        return {}
      }
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 这里存放数据
    return {
      showBol: this.show,
      activetab: 0,
      active: 0,
      choseIndex: 0,
      submiting: false,
      fromSonObj: {},
      list: [
        '2021年1月1日 至 2021年12月1日 （今年一年）',
        '2021年1月1日 至 2021年12月1日 （今年下半年）',
        '2021年1月1日 至 2021年12月1日 （明年一年）'
      ],
      freeList: [
        {
          id: '12xxpjj',
          name: '请选择自由订购数量',
          detail: '有效期：1年（自用户缴费成功后计算）',
          badge: 1
        }
      ],
      times: ['每周一次', '每周两次', '每月一次', '每月两次'],
      mrtime: '每周两次'
    }
  },
  watch: {
    show(newvalue) {
      // 不支持字符串直接修改，所以需要在这里使用其中之一的方法监听
      // 监听父容器的show布尔值改变内部组件的布尔值（子组件的布尔值修改会报错）
      // 除非遇到json类型的对象深浅拷贝，是可更改
      this.showBol = newvalue
      this.active = this.list.indexOf(this.sonobj.time)
      this.choseIndex = this.times.indexOf(this.mrtime)
    },
    showBol(bol) {
      // 子组件使用自己的布尔值监听修改父容器的布尔值
      this.$emit('channel', bol)
    }
  },
  methods: {
    ChoseNum(item, index) {
      this.choseIndex = index
      this.mrtime = item
    },
    choseTime(item, index) {
      this.active = index
      console.log(item)

      // 时间赋值父容器对象返回
      const sonobj = this.sonobj
      sonobj.time = item
      this.fromSonObj = sonobj

      // 设计稿没有确定按钮，无法确定选完之后的交互
    },
    change(obj, num) {
      if (num === 1) {
        obj.badge = 1
      }
      // 已经改变
      console.log(this.freeList)
      // this.freeList
    },
    submit() {
      this.submiting = true

      setTimeout(() => {
        // 传值给父容器

        this.submiting = false
        this.showBol = false
        this.$toast.success('提交成功')
        // 基础包逻辑
        this.$emit('choseTime', this.fromSonObj)

        // 个性化提交
        if (this.fromSonObj.from === 'one') {
          // 接口提交可以写在这
          console.log(this.freeList)
        }
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  padding: 20px;
  font-size: 18px;
}
.title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}
.title-detail {
  font-weight: 400;
  color: #9b9b9b;
  font-size: 16px;
  width: 95%;
}
.price {
  line-height: 50px;
  font-size: 20px;
  text-align: right;
  width: 100%;
}
.chose-title {
  font-size: 16px;
}
ul {
  margin-bottom: 113px;
}
.row-time {
  border-radius: 7px;
  line-height: 40px;
  padding: 10px 25px;
  margin: 10px 0px 0 0;
  font-size: 16px;
}

.div-cont {
  padding: 20px;
  font-size: 16px;
  margin-bottom: 30px;
}
.div-cont .title {
  font-size: 16px;
}
.right {
  margin: 15px 0 0 0;
}
/deep/.dialogTap .van-tabs__wrap {
  display: inline-block;
  width: 200px;
}
.choseDiv {
  border-radius: 8px;
  text-align: center;
  padding: 10px;
  line-height: 40px;
  margin-bottom: 20px;
  width: 120px;
}
.row-time,
.choseDiv {
  background: #eaeaea;
}
.current .choseDiv,
.row-time.current {
  background: rgb(74 144 226 / 20%);
  color: #4a90e2;
}
</style>
